<template>
  <div style="width: 100%; height: 100%">
      <vxe-table
      :showHeader="showHeader"
      :max-height="maxHeight"
      :scroll-y="{ enabled: false }"
      :data="data.data"
      :span-method="objectSpanMethod"
    >
      <vxe-table-column
        :highlight-hover-row="true"
        v-for="(config, index) in data.columns"
        :key="index"
        :type="config.type"
        :field="config.field"
        :title="config.title"
        :align="align"
        :fixed="config.fixed"
        :width="config.width"
        :min-width="config.minWidth ? config.minWidth : '200'"
        :filters="config.filters"
      >
      </vxe-table-column>
    </vxe-table>
    <!-- <vxe-grid class="reverse-table" v-bind="data"  :showHeader="showHeader"></vxe-grid> -->
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Object | Array,
      default: () => ({
        columns: [],
        data: [],
      }),
    },
    height: {
      type: Number | String,
      default: () => "",
    },
    merge: {
      type: Object | Array,
      default: () => [],
    },
    reverse: {
      type: Boolean,
      default: () => false,
    },
    border: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      data:{
         columns: [],
        data: [],
      }
    };
  },
  watch: {
    tableData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        if (this.reverse == true) {
          let obj = new Object();
          obj = JSON.parse(JSON.stringify(this.tableData));
          this.reverseTable(obj.columns, obj.data);
        }
        // console.log(val, oldVal);
      },
      deep: true, //true 深度监听
    },
  },
  created() {
    this.tableData.border = this.border;
    if (this.reverse == true) {
      this.reverseTable(this.tableData.columns, this.tableData.data);
    }
  },
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = this.merge;
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    // 反转函数
    reverseTable(columns, list) {
      try {
        const buildData = columns.map((column) => {
          const item = { col0: column.title };
          list.forEach((row, index) => {
            item[`col${index + 1}`] = row[column.field];
          });
          return item;
        });
        const buildColumns = [
          {
            field: "col0",
            // fixed: "left",
            // width: 80,
            minWidth: 120,
          },
        ];
        list.forEach((item, index) => {
          buildColumns.push({
            field: `col${index + 1}`,
            minWidth: 120,
          });
        });
        this.data.data = buildData;
        this.data.columns = buildColumns;
        //  console.log(this.tableData)
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
</style>